import React, { useEffect } from 'react';
import * as echarts from 'echarts';

const DonutChart = () => {
  // 在组件内部定义数据
  const categories = ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'];
  const seriesData = [5, 20, 36, 10, 10, 20];

  useEffect(() => {
    const chartDom = document.getElementById('main');
    if (chartDom) {
      const myChart = echarts.init(chartDom);
      myChart.setOption({
        tooltip: {},
        xAxis: {
          data: categories
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: seriesData
          }
        ]
      });
    }
  }, []); // 依赖数组留空，因为数据是固定的

  return <div id="main" style={{ width: '100%', height: '100%' }}></div>;
};

export default DonutChart;